<template>
	<view class="container">
		<view class="constellation">
			<view class="constellation-part" v-for="i in 78" :style="' transform: rotate('+i*4.5+'deg) skewY(0);'">
			<image src="../../static/images/tlp.jpg"   mode="widthFix"></image>
			</view>
		</view>
		<!-- <view class="constellation2">
			<view class="constellation-part" v-for="i in 39" :style="' transform: rotate('+i*9.2+'deg) skewY(-1deg);'">
			<image src="../../static/images/tlp.jpg" style="width: 150rpx;" mode="widthFix"></image>
			</view>
		</view> -->

	
	</view>
</template>

<script>
	

	let app = getApp();
	export default {
		components: {

		},
		data() {
			return {
				act: 0,
				dataInfo: {},
				certificateNum: '',
				value: "",
				data:[]
			}
		},
		onLoad(opt) {
			this.data=	this.generateSineWave(72, 30, .5)

		},
		mounted() {
			
		
			 
			// 使用函数生成一个正弦波形
		
		
		},

		methods: {
						
					 generateSineWave(length, amplitude, frequency) {
					  var wave = [];
					  for (var i = 0; i < length; i++) {
					    // 使用2π来确保正弦波在整个长度中循环
					    var radians = (i / length) *2 * Math.PI * frequency;
					    wave.push(amplitude * Math.sin(radians));
					  }
					  return wave;
					}
			}





	}
</script>
<style scoped lang="scss">
	.container {
		height: 100vh;
		// background: linear-gradient(180deg, #4375f2, #fff);
		padding-top: 40rpx;
	}
 .constellation {
            margin: 0 auto;
            position: relative;
            width:700rpx;
            height: 700rpx;
            border-radius: 50%;
            background-color: #fff;
            overflow: hidden;
            transform: rotateZ(22.5deg);
        }
		.constellation2{
			margin: 0 auto;
			position: fixed;
			width:500rpx;
			height: 500rpx;
			border-radius: 50%;
			background-color: #fff;
			z-index: 99;
			overflow: hidden;
			transform: rotateZ(22.5deg);
		}
        .constellation-part {
            position: absolute;
            top: 0;
			overflow: hidden;
            right: 0;
            width: 50%;
            height: 50%;
            transform-origin: 0 100%;
            box-sizing: border-box;
			image{
		
			// transform: rotate(45.8deg);
			}
        }
		
</style>